<template>
	<view class="">
		<view class="cu-form-group">
			<!-- -->
			<input placeholder="请输入用户名或手机号" name="input" v-model="searchName" @input="textChange($event)"></input>
			<button class='cu-btn bg-green shadow' @tap="searchUser">查找</button>
		</view>

		<view class="cu-list menu card-menu margin-top">
			<view class="cu-item">
				<view class="content">
					<text class="text-grey">{{title}}</text>
				</view>
			</view>
			<view class="cu-item" v-for="(item, index) in users" :key="item.name">
				<view class="content">
					<text class="text-grey">{{item.publisher}}</text>
				</view>
				<view class="center">
					<view class="action">
						<button class="cu-btn round shadow" @tap="cancelCare(index)" :class="{'bg-red':item.watch?true:false,'bg-green':item.watch?false:true}">
							<text v-if="item.watch">取消关注</text>
							<text v-else>关注</text>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				users: [], //请求到的已关注用户存储
				searchName: '',
				title: '已关注用户：'
			}
		},
		created() {
			uni.request({
				url: this.$config.apiUrl+'/dasSubscriptionController/watchList',
				data: {
					userId: this.$store.getters.userid
				},
				success: (res) => {
					if (res.data.ok) {
						res.data.data.forEach(function(item) {
							item.watch = 1; //控制按钮效果的变量，给每一个数据加上
						})
						this.users = res.data.data;
					} else {
						console.log('请求失败' + res.data.message)
					}
				},
				fail: () => {
					console.log('nssq/search获取已关注列表出错')
				}
			});
		},
		methods: {
			cancelCare(index) {
				var w = this.users[index].watch === 1 ? 0 : 1, //0为取消关注，1为关注
					p = this.users[index].publisherId;
				uni.request({
					url: this.$config.apiUrl+'/dasSubscriptionController/watch', //cfz本地服务器,此处为获取后台数据的模拟
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						userId: this.$store.getters.userid,
						publisherId: p,
						watch: w
					},
					success: (res) => {
						if (res.data.ok) {
							if (w == 1) { //页面按钮变化操作
								this.users[index].watch = 1;
							} else {
								this.users[index].watch = 0;
							}
						}
					},
					fail: (res) => {
						console.log(res);
					}
				})
			},
			searchUser() {
				if (this.searchName !== '') {
					uni.request({
						url: this.$config.apiUrl+'/dasSubscriptionController/searchUser', //此处不加http则会被CORS拦截，记得查
						data: {
							userId: this.$store.getters.userid,
							publisher: this.searchName
						},
						success: (res) => {
							// console.log(res.data);
							if (res.data.ok) {
								this.title = '查找到的用户：'
								this.users = res.data.data;
							}
						},
						fail: (res) => {
							console.log(res);
						}
					});
				}
			},
			textChange(event) {
				if (event.target.value === '') {
					this.title = '已关注用户：'
					uni.request({
						url: this.$config.apiUrl+'/dasSubscriptionController/watchList',
						data: {
							userId: this.$store.getters.userid
						},
						success: (res) => {
							if (res.data.ok) {
								res.data.data.forEach(function(item) {
									item.watch = 1; //控制按钮效果的变量，给每一个数据加上
								})
								this.users = res.data.data;
							} else {
								console.log('请求失败' + res.data.message)
							}
						},
						fail: () => {
							console.log('nssq/search获取已关注列表出错')
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	.line {
		border: 10rpx solid #dcdcdc;
	}

	.center {
		width: 172rpx;
		display: flex;
		justify-content: center;
	}
</style>
